<template>
	<view class="commodity-detail">
		<view class="commodity-header">
			<view class="commodity-head"></view>
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" loop>
				<swiper-item v-for="(item,i) in detailInfo.productImage" :key="i">
					<image :src="'data:image/jpg;base64,'+item" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="commodity-main">
			<view class="commodity-main-top">
				<view class="main-top-price"><text>¥</text><text
						class="top-weight">{{detailInfo.productPrice}}</text><text>起</text></view>
				<view class="main-top-map"><text>最多可送2383 EightTravel 里程</text>
					<text>查看</text>
				</view>
				<view class="main-top-count">
					<view class="top-count-left">
						<text>旅行就上EightTravel</text>
					</view>
					<view class="top-count-right">
						<text>月销量{{detailInfo.salesVolume}}笔</text>
					</view>
				</view>
				<view class="main-top-text">
					<image class="mok"
						src="https://gw.alicdn.com/imgextra/i2/O1CN01md1bVm1acnzZ6G28h_!!6000000003351-2-tps-336-90.png"
						mode=""></image>
					{{detailInfo.productName}}
				</view>
			</view>
			<view class="image-introduce">
				<view class="title">
					图文介绍
				</view>
				<div class="content">
					<image :src="'data:image/jpg;base64,'+detailInfo.productPicIntro"></image>
				</div>
			</view>
		</view>
		<view class="goods-carts">
			<view class="collect">
				<button class="mini-btn" type="default" size="mini">收藏</button>
			</view>
			<view class="service">
				<button class="mini-btn" type="default" size="mini" open-type="contact">客服</button>
			</view>
			<view class="immediately">
				<button class="mini-btn" type="warn" size="mini" @click="purchase">立即购买</button>
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
	</view>
</template>
//traffic
<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		productDetail,
		submitOrder
	} from '../../api/user.js'
	import {
		createordernum
	} from '../../utils/orderUtil.js'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from 'vuex' // 引入useStore 方法
	const store = useStore();

	const list = ref([])
	// 底部按钮

	let onLoadValue = ref({});
	let detailInfo = reactive({
		productImage: [],
		productPrice: '',
		salesVolume: '',
		productName: '',
		productPicIntro: '',
		_id: ''
	})
	onLoad((option) => {
		// console.log(option)
		onLoadValue.value = option;
	});
	const getProductDetail = () => {
		let data = onLoadValue.value
		productDetail(data).then(res => {
			console.log(res);
			let {
				code,
				data
			} = res;
			console.log(code, data)
			if (code == 200) {
				Object.assign(detailInfo, data)
			}
		})
	}
	let calendar = ref(null)
	// 点击立即购买，选择时间段
	const purchase = () => {
		calendar.value.open()
	}
	const confirm = (e) => {
		uni.showModal({
			title: '提示',
			content: '确定购买该商品吗？',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					let data = {
						orderNumber: createordernum(),
						orderPlacer: store.state.user.userInfo.id,
						orderProductName: detailInfo.productName,
						orderProductImage: detailInfo.productImage[0],
						orderProductId: detailInfo._id,
						orderServeStart: e.fulldate,
						orderServeEnd: '',
						orderMoney: detailInfo.productPrice,
						orderStatus: '01'
					}
					console.log(data)
					submitOrder(data).then(res => {
						console.log(res);
						let {
							code,
							data
						} = res;
						if (code == 200) {
							uni.navigateTo({
								url: '/pages/paymentOrder/paymentOrder?id=' + data._id
							})
						}
					}).catch(err => {

					})
				} else if (res.cancel) {
					console.log('用户点击取消');
					console.log(e);
				}
			}
		});
	}
	onMounted(() => {
		getProductDetail()
	})
</script>

<style lang="scss">
	.commodity-detail {
		padding-bottom: 98upx;
		background: #f8f8f8;
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		.commodity-header {
			width: 100%;
			height: 750upx;
			position: relative;

			.swiper {
				height: 100%;

				.swiper-item {
					height: 750upx;
					line-height: 750upx;
				}

				image {
					width: 100vw;
					height: 750upx;
				}
			}

			.commodity-head {
				width: 100%;
				height: 80upx;
				line-height: 80upx;
				position: absolute;
				top: 40upx;
				right: 0;
				z-index: 10;
				color: white;
			}
		}

		.commodity-main {
			box-sizing: border-box;
			width: 100vw;
			display: flex;
			padding: 20upx;
			flex-direction: column;
			align-items: center;

			.commodity-main-top {
				box-sizing: border-box;
				padding: 20upx;
				width: 96vw;
				background: white;
				border-radius: 20upx;

				.main-top-price {
					width: 100%;
					height: 48upx;
					line-height: 48upx;
					color: red;

					.top-weight {
						font-weight: bold;
						font-size: 36upx;
					}
				}

				.main-top-map {
					box-sizing: border-box;
					width: 100%;
					height: 40upx;
					display: flex;
					justify-content: space-between;
					font-size: 22upx;
					margin-top: 10upx;

					text {
						color: red;
						background: rgba(255, 230, 200, 0.5);
					}

					navigator {
						text-decoration: none;
						color: blue;
					}
				}

				.main-top-count {
					width: 100%;
					height: 44upx;
					display: flex;
					justify-content: space-between;
					font-size: 24upx;
					color: #ccc;
					margin-top: 10upx;

					.top-count-left {
						height: 44upx;
						line-height: 44upx;
					}

					.top-count-right {
						height: 44upx;
						line-height: 44upx;
					}
				}

				.main-top-text {
					width: 100%;
					font-weight: bold;
					margin-top: 20upx;

					image {
						width: 120upx;
						height: 32upx;
					}
				}
			}

			.image-introduce {
				.title {
					text-align: left;
					font-weight: bold;
					font-size: 32upx;
					margin-bottom: 20upx;
				}

				padding: 20upx;
				border-radius: 20upx;
				box-sizing: border-box;
				margin-top: 20upx;
				width: 100%;
				background: #fff;
				text-align: center;

				image {
					width: 100%;
				}
			}
		}

		.goods-carts {
			box-shadow: 5px -1px 2px gainsboro;
			/* #ifndef APP-NVUE */
			/* #endif */
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
			background: #fff;
			height: 80upx;
			padding: 20upx 20upx;
			display: flex;
			align-items: center;

			.collect {
				margin-right: 10upx;
			}

			.service {
				margin-right: auto;
			}

			.immediately {
				button {
					width: 300upx;
				}
			}
		}
	}
</style>
